<!-- 页面 -->
<template>
	<s-layout navbar="normal" onShareAppMessage style="background-color: #ffffff" tabbar="/pages/index/monitorTask"
	          title="监测任务">
		<!--商品ID搜索-->
		<uni-search-bar
				cancelButton="none"
				class="ss-flex-1"
				placeholder="请输入关键词搜索任务"
				radius="33"
				@confirm="onSearch($event)"
		/>
		<su-sticky bgColor="#fff">
			<su-tabs
					:current="state.currentTab"
					:list="tabMaps"
					:scrollable="true"
					@change="onTabsChange"
			></su-tabs>
		</su-sticky>
		<s-empty
				v-if="state.pagination.total === 0"
				icon="/static/order-empty.png"
				text="暂无任务"
		></s-empty>
		<view v-if="state.pagination.total > 0">
			<view>
				<view
						v-for="task in state.pagination.data"
						:key="task.id"
						class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
				>
					<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
						<view class="order-no">{{ task.name }}</view>
						<view class="order-state ss-font-26" style="color:  #F39800">
							{{ taskStatus(task) }}
						</view>
					</view>
					<view class="subscription-box">
						<view class="grid">
							<view v-if="sheep.$helper.isRealEmpty(task.sellerId)" class="full-width-item">
								<text class="icon">⭐</text>
								<view class="info-group">
									<text class="label">关键词</text>
									<text class="value">{{ task.keyword }}</text>
								</view>
							</view>
							<view v-if="!sheep.$helper.isRealEmpty(task.sellerId)" class="grid-item">
								<text class="icon">⭐</text>
								<view class="info-group">
									<text class="label">关键词</text>
									<text class="value">{{ task.keyword }}</text>
								</view>
							</view>
							<view v-if="!sheep.$helper.isRealEmpty(task.sellerId)" class="grid-item">
								<text class="icon">😀</text>
								<view class="info-group">
									<text class="label">关注卖家</text>
									<text class="value">{{ task.sellerId }}</text>
								</view>
							</view>
							<view class="grid-item">
								<text class="icon">⏱</text>
								<view class="info-group">
									<text class="label">订阅套餐</text>
									<text class="value">{{ task.subConfigName }} {{ task.queryLimit }}秒/次</text>
								</view>
							</view>
							<view class="grid-item">
								<text class="icon">🍀</text>
								<view class="info-group">
									<text class="label">推送平台</text>
									<text class="value">{{ task.pushPlatformNames }}</text>
								</view>
							</view>
							<view class="grid-item">
								<text class="icon">🔖</text>
								<view class="info-group">
									<text class="label">订阅时间</text>
									<text class="value">到 {{ sheep.$helper.timeFormat(task.subEndTime, "yy年mm月dd日") }}</text>
								</view>
							</view>
							<view class="grid-item">
								<text class="icon">💡</text>
								<view class="info-group">
									<text class="label">最近扫描时间</text>
									<text class="value">{{ sheep.$helper.timeFormat(task.execTime, "mm月dd日 hh:MM:ss") }}</text>
								</view>
							</view>
						</view>
					</view>
					<view
							class="order-card-footer ss-flex ss-col-center ss-p-x-20"
					>
						<view class="ss-flex ss-col-center ml-auto">
							<button class="apply-btn ss-reset-button" @tap.stop="onTaskDetail(task)">
								详情
							</button>
							<button class="config-btn ss-reset-button"
							        @tap.stop="onTaskConfig(task)">
								配置
							</button>
							<button v-if="task.status !== 0" class="tool-btn ss-reset-button ui-BG-Main-Gradient"
							        @tap.stop="onStop(task)">
								停止
							</button>
							<button v-else class="tool-btn ss-reset-button ui-BG-Main-Gradient"
							        @tap.stop="onStart(task)">
								启动
							</button>
							<button class="delete-btn ss-reset-button"
							        @tap.stop="onDel(task)">
								删除
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<su-fixed :isInset="false" :val="70" bottom placeholder>
			<view style="padding-left: 40rpx; padding-right: 40rpx">
				<!--新建任务-->
				<button class="generic-btn" @tap="onAdd">
					<text class="btn-text">新建任务</text>
				</button>
			</view>
		</su-fixed>

		<!-- 加载更多 -->
		<uni-load-more
				v-if="state.pagination.total > 0"
				:content-text="{
        contentdown: '上拉加载更多',
      }"
				:status="state.loadStatus"
				@tap="loadmore"
		/>
	</s-layout>
</template>

<script setup>
import {computed, reactive} from 'vue';
import {onLoad, onPullDownRefresh, onReachBottom, onShow} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import _, {clone} from 'lodash';

const pagination = {
	data: [],
	page: 0,
	total: 0,
	size: 5
};
// 数据
const state = reactive({
	currentTab: 0,
	enableRealTimeRate: false,
	currentTabPack: 0,
	currentTabStorage: 0,
	isAllSelected: false,
	pagination: {
		data: [],
		page: 1,
		size: 5,
		total: 0,
		name: null
	},
	loadStatus: '',
	deleteOrderId: 0,
	error: 0,
});

const selectOrderIds = reactive([])

const userInfo = computed(() => sheep.$store('user').userInfo);

const tabMaps = [
	{
		name: '全部',
		value: '-1',
	},
	{
		name: '运行中',
		value: '2',
	},
	{
		name: '已停止',
		value: '0',
	},
];

// 切换选项卡
function onTabsChange(e) {
	selectOrderIds.splice(0, selectOrderIds.length)
	if (state.currentTab === e.index) return;

	state.pagination = clone(pagination);
	state.currentTab = e.index;
	state.pagination.data = []
	getMonitorTaskList();
}

function taskStatus(task) {
	// 返回任务的监测状态
	if (task.status === 0) {
		return '已停止'
	} else if (task.status === 1) {
		return '已就绪'
	} else if (task.status === 2) {
		return '运行中'
	}
}

function onSearch(e) {
	console.log(e.value)
	state.pagination.name = e.value
	state.pagination.data = []
	state.pagination.page = 1
	getMonitorTaskList()
}

function onAdd() {
	sheep.$helper.toast('新建监测任务')
	sheep.$router.go('/pages/index/addMonitorTask')
}

function onTabsChangeStorage(e) {
	selectOrderIds.splice(0, selectOrderIds.length)
	if (state.currentTabStorage === e.index) return;

	state.pagination = clone(pagination);
	state.currentTabStorage = e.index;
	state.pagination.data = []
	getMonitorTaskList();
}

// 任务详情
function onTaskDetail(task) {
	sheep.$router.go('/pages/index/monitorTaskDetail', {
		taskId: task.id
	});
}

// 编辑任务
function onTaskConfig(task) {
	sheep.$router.go('/pages/index/addMonitorTask', {
		taskId: task.id
	});
}

// 停止任务
function onStop(task) {
	uni.showModal({
		title: '提示',
		content: '确定要【停止】任务吗?',
		success: async function (res) {
			if (res.confirm) {
				await sheep.$api.miao.stop(task.id);
				sheep.$helper.toast('操作成功, 刷新查看最新状态')
				reloadData()
			}
		},
	});
}

// 启动任务
function onStart(task) {
	uni.showModal({
		title: '提示',
		content: '确定要【启动】任务吗?',
		success: async function (res) {
			if (res.confirm) {
				await sheep.$api.miao.start(task.id);
				sheep.$helper.toast('操作成功, 刷新查看最新状态')
				reloadData()
			}
		},
	});
}

// 删除任务
function onDel(task) {
	uni.showModal({
		title: '提示',
		content: '确定要删除任务吗?',
		success: async function (res) {
			if (res.confirm) {
				await sheep.$api.miao.del(task.id);
				sheep.$helper.toast('操作成功, 刷新查看最新状态')
				reloadData()
			}
		},
	});
}


// 继续支付
function onPay(data) {
	console.log('data', data)
	sheep.$router.go('/pages/pay/index', {
		orderSN: data.orderSn,
		totalAmount: data.totalAmount,
		orderType: 'memberConsumer',
		rate: data.rate
	});
}

// 获取任务列表
async function getMonitorTaskList() {
	state.loadStatus = 'loading';
	console.log(state.currentTabPack)
	console.log('size:', state.pagination)
	let res = await sheep.$api.miao.monitorTaskList({
		pageNum: state.pagination.page,
		pageSize: state.pagination.size,
		status: tabMaps[state.currentTab].value,
		name: state.pagination.name
	});
	const {rows, total} = res;
	console.log(res)
	state.pagination.data = _.uniqBy([...state.pagination.data, ...rows], 'id');
	state.pagination.total = total
	// 判断是否还有下一页
	if (state.pagination.total <= state.pagination.data.length) {
		state.loadStatus = 'noMore';
	} else {
		state.loadStatus = 'more';
		state.pagination.page++;
	}
}

onLoad(async (options) => {
	reloadData()
});

onShow(async (options) => {
	reloadData()
})

onShow(async (options) => {
	await getMonitorTaskList();
})

// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		state.pagination.page++
		getMonitorTaskList();
	}
}

// 上拉加载更多
onReachBottom(() => {
	loadmore();
});

//下拉刷新
onPullDownRefresh(() => {
	reloadData()
});

function reloadData() {
	state.pagination.data = []
	state.pagination.page = 0
	getMonitorTaskList()
}
</script>

<style lang="scss" scoped>
.score-img {
	width: 36rpx;
	height: 36rpx;
	margin: 0 4rpx;
}

.subscription-box {
	padding: 0;
	background: #f8f9fa;
	border-radius: 16rpx;
	margin: 20rpx;
	box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.05);

	.subscription-box {
		display: flex;
		flex-direction: column;
	}

	/* 两列布局的网格容器 */
	.grid {
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1rpx solid #eee;
	}

	/* 单个网格项 */
	.grid-item {
		width: 50%;
		display: flex;
		align-items: center;
		padding: 10rpx;
		box-sizing: border-box;
		border-right: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
	}

	/* 去掉每行最后一个项右侧边框 */
	.grid-item:nth-child(2n) {
		border-right: none;
	}

	/* 全宽项样式 */
	.full-width-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 10rpx;
		box-sizing: border-box;
	}

	/* 图标及信息组继承原有样式 */
	.full-width-item .icon,
	.grid-item .icon {
		font-size: 30rpx;
		margin-right: 20rpx;
		color: #666;
	}

	.full-width-item .info-group,
	.grid-item .info-group {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.full-width-item .info-group .label,
	.grid-item .info-group .label {
		font-size: 23rpx;
		color: #999;
		line-height: 1.4;
	}

	.full-width-item .info-group .value,
	.grid-item .info-group .value {
		font-size: 25rpx;
		color: #333;
		font-weight: 500;
		line-height: 1.5;
	}

}

.tool-btn {
	width: 120rpx;
	height: 50rpx;
	font-size: 24rpx;
	border-radius: 30rpx;
	background: white;
	margin-right: 10rpx;

	&:last-of-type {
		margin-right: 0;
	}
}

.delete-btn {
	width: 120rpx;
	height: 50rpx;
	font-size: 24rpx;
	border-radius: 30rpx;
	color: #F39800;
	background: #fee;
	margin-right: 10rpx;
	line-height: normal;
	border: 1rpx solid #F39800;

	&:last-of-type {
		margin-right: 0;
	}
}

.apply-btn {
	width: 120rpx;
	height: 50rpx;
	font-size: 24rpx;
	border-radius: 30rpx;
	border: 2rpx solid #dcdcdc;
	line-height: normal;
	margin-left: 10rpx;

	&:last-of-type {
		margin-right: 0;
	}
}

.config-btn {
	width: 120rpx;
	height: 55rpx;
	font-size: 24rpx;
	border-radius: 30rpx;
	border: 2rpx solid #dcdcdc;
	line-height: normal;
	margin-left: 10rpx;
	background: linear-gradient(to right, #3E3A39, #3E3A39, #3E3A39);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	animation: fadeInUp 0.5s ease-out both;
	color: #ffffff;

	&:last-of-type {
		margin-right: 0;
	}
}

.swiper-box {
	flex: 1;

	.swiper-item {
		height: 100%;
		width: 100%;
	}
}

.order-list-card-box {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 1px 1px 10px #d7d7d7;
	border-radius: 20rpx;
	padding: 10rpx;
	/* background-image: url("https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/140bd016097a894e33a18de250f41450b2WX20250114-221159@2x.png"); */
	background-size: 100% 15% !important;
	background-repeat: no-repeat;

	.tag {
		flex-shrink: 0;
		padding: 4rpx 10rpx;
		font-size: 24rpx;
		font-weight: 500;
		border-radius: 4rpx;
		color: #ffffff !important;
		background: #F39800;
	}


	.order-card-header {
		height: 60rpx;

		.order-no {
			font-size: 34rpx;
			font-weight: bold;
			color: #3E3A39;
		}

		.order-state {
		}
	}

	.pay-box {
		.discounts-title {
			font-size: 24rpx;
			line-height: normal;
			color: #999999;
			margin-right: 20rpx;
		}

		.discounts-money {
			font-size: 24rpx;
			line-height: normal;
			color: #999;
			font-family: OPPOSANS;
		}

		.pay-color {
			color: #333;
		}
	}

	.order-card-footer {
		height: 80rpx;

		.more-item-box {
			padding: 20rpx;

			.more-item {
				height: 60rpx;

				.title {
					font-size: 26rpx;
				}
			}
		}

		.more-btn {
			color: $dark-9;
			font-size: 24rpx;
		}

		.content {
			width: 154rpx;
			color: #333333;
			font-size: 26rpx;
			font-weight: 500;
		}
	}
}

:deep(.uni-tooltip-popup) {
	background: var(--ui-BG);
}

.warning-color {
	color: #F39800;
}

.danger-color {
	color: #F39800;
}

.success-color {
	color: #52c41a;
}

.info-color {
	color: #999999;
}

:deep() {
	checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #fff;
		background: var(--ui-BG-Main);
	}

	.wx-checkbox-input.wx-checkbox-input-checked {
		border: none !important;
	}

	.uni-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	.uni-checkbox-input:hover {
		border-color: #d1d1d1 !important;
	}
}

:deep(.ui-fixed) {
	height: 72rpx;
}

.cart-box {
	width: 100%;

	.cart-header {
		height: 70rpx;
		background-color: #f6f6f6;
		width: 100%;
		position: fixed;
		left: 0;
		top: v-bind('sys_navBar') rpx;
		z-index: 1000;
		box-sizing: border-box;
	}

	.cart-footer {
		height: 100rpx;
		background-color: #fff;

		.pay-btn {
			display: inline-block;
			width: 60rpx;
			height: 70rpx;
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: 500;
			border-radius: 40rpx;
		}
	}

	.cart-content {
		margin-top: 70rpx;

		.goods-box {
			background-color: #fff;
		}
	}
}


.blur {
	backdrop-filter: blur(50px) !important;
	background-color: rgba(255, 255, 255, .32) !important;
}


.generic-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 24rpx;
	padding: 5rpx;
	background: linear-gradient(to right, #3E3A39, #3E3A39, #3E3A39);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
	animation: fadeInUp 0.5s ease-out both;
	color: #ffffff;
	font-weight: bold;
	font-size: 30rpx;
}
</style>
